<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box"></div>
    <h3></h3>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;

            border: 5px solid crimson;

            padding: 10px;
            margin: 20px;
        }
        h3{
            height: 1000px;
        }
    </style>
    <script>
        var box = document.getElementById('box')
        //client不包括溢出部分，和scroll都不包括border和margin部分
        console.log(box.clientHeight)
        console.log(box.clientWidth)

        console.log(document.documentElement.clientHeight)//整个界面高度
        console.log(document.body.clientHeight)//元素总高度
        
        console.log(document.documentElement.clientWidth)//整个界面宽度
        console.log(document.body.clientWidth)//元素总宽度
        
        //scroll包括溢出部分，但是几乎没区别
        console.log(box.scrollHeight)
        console.log(box.scrollWidth)

        console.log(document.documentElement.scrollHeight)//整个界面高度
        console.log(document.body.scrollHeight)//元素总高度
        
        console.log(document.documentElement.scrollWidth)//整个界面宽度
        console.log(document.body.scrollWidth)//元素总宽度

        //offset包括border
        console.log(box.offsetHeight)
        console.log(box.offsetWidth)

        console.log(document.documentElement.scrollTop)//滚轮距离顶端距离
        //scrollLeft时距离左端距离
    </script>
</body>
</html>